<template>
  <div class="divBox">
    <el-card class="box-card">
      <template v-slot:header>
        <div class="clearfix">
        <el-steps :active="currentTab" align-center finish-status="success">
          <el-step title="商品信息" />
          <el-step title="商品详情" />
          <el-step title="其他设置" />
          <!--<el-step title="规格设置" />-->
        </el-steps>
      </div>
      </template>

      <el-form
        ref="formValidate"
        v-loading="fullscreenLoading"
        class="formValidate mt20"
        :rules="ruleValidate"
        :model="formValidate"
        label-width="120px"
        @submit.prevent
      >
        <el-row v-show="currentTab === 0" :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="storeName">
              <el-input
                v-model="formValidate.storeName"
                maxlength="249"
                placeholder="请输入商品名称"
                style="width: 300px;"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品分类：" prop="cateIds">
              <el-cascader
                v-model="formValidate.cateIds"
                :options="merCateList"
                :props="props2"
                clearable
                class="selWidth"
                style="width: 300px;"
                :show-all-levels="false"
                :disabled="isDisabled"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品关键字：" prop="keyword">
              <el-input v-model="formValidate.keyword" placeholder="请输入商品关键字"  style="width: 300px;" :disabled="isDisabled" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unitName">
              <el-input v-model="formValidate.unitName" placeholder="请输入单位"  style="width: 300px;" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品封面图：" prop="image">
              <!-- <div class="acea-row upLoadPicBox row-middle" @click="modalPicTap('1')" :disabled="isDisabled"> -->
              <div class="acea-row upLoadPicBox row-middle" :disabled="isDisabled">
                <div v-if="formValidate.image" class="pictrue">
                  <el-image
                    class="image"
                    :src="formValidate.image"
                    :preview-src-list="isDisabled ? [formValidate.image] : []"
                  >
                  </el-image>
                  <span class="mr10" type="danger" text @click="handleRemoveImage" v-if="false">x</span>
                </div>
                <div v-else>
                  <el-upload
                    class="upload-demo"
                    action
                    :http-request="handleImageUpload"
                    :show-file-list="false"
                    multiple
                  >
                    <el-button class="mr10" type="primary" >上传封面图</el-button>
                  </el-upload>
                  <!-- <el-alert title="上传封面图不得大于5MB" :closable="false" type="warning" effect="dark"> </el-alert> -->
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="sliderImages">
              <div class="acea-row">
                <div
                  v-for="(item, index) in formValidate.sliderImages"
                  :key="index"
                  class="pictrue"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                >
                  <div class="pictrue">
                    <el-image class="image" :src="item" :preview-src-list="formValidate.sliderImages"> </el-image>
                    <span class="mr10" type="danger" text @click="handleRemoveSliderImages(index)" v-if="false">x</span>
                  </div>

                </div>
                <div
                  v-if="formValidate.sliderImages.length < 10"
                  class="upLoadPicBox"
                >
                <!-- <el-upload
                    class="upload-demo"
                    action
                    :http-request="handleSliderImagesUpload"
                    :show-file-list="false"
                    multiple
                  >
                    <el-button class="mr10" type="primary" v-if="!isDisabled">上传轮播图</el-button>
                  </el-upload> -->
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主视频：">
              <div
                v-if="!formValidate.videoLink"
                class="upLoadPicBox"
              >

              <!-- <el-upload
                  class="upload-demo"
                  action
                  :http-request="handleVideoUpload"
                  :show-file-list="false"
                  :disabled="isDisabled"
                  multiple
                >
                  <el-button class="mr10" type="primary" v-if="!isDisabled">上传主视频</el-button>
                </el-upload> -->
              </div>
              <div class="iview-video-style" v-if="formValidate.videoLink">
                <video
                  style="width: 100%; height: 100% !important; border-radius: 10px"
                  :src="formValidate.videoLink"
                  controls
                  autoplay
                  muted
                >
                  您的浏览器不支持 video 标签。
                </video>
                <span class="mr10" type="danger" text @click="handleRemoveVideo" v-if="false">x</span>
              </div>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24">
            <el-form-item label="商品规格：">
              <el-button class="mr15" type="primary"  @click="addAttrValue" v-if="false">添加规格</el-button>
            </el-form-item>
          </el-col> -->
          <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <!-- 多规格表格-->
            <el-form-item
              label="商品规格："
              class="labeltop"
              :class="isDisabled ? 'disLabel' : 'disLabelmoren'"
            >

              <el-table :data="ManyAttrValue" border class="tabNumWidth" size="small">
                <el-table-column
                  v-for="(item, iii) in attrValue"
                  :key="iii"
                  :label="formThead[iii].title"
                  align="center"
                  min-width="120"
                >
                  <template #default="{row}">
                    <el-input
                      :disabled="isDisabled || (formThead[iii].title !== '销售价' && formThead[iii].title !== '销量')"
                      v-model="row[iii]"
                      :type="formThead[iii].title === '商品编号' || formThead[iii].title === '规格名称'  ? 'text' : 'number'"
                      class="priceBox"
                    />
                  </template>
                </el-table-column>
                <el-table-column v-if="!isDisabled" key="3" align="center" label="操作" min-width="80">
                  <template #default="{$index}">
                    <el-button v-if="$index > 0" type="primary" text class="submission" @click="delAttrTable($index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 商品详情-->
        <el-row v-show="currentTab === 1 && false">
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <editor v-model="formValidate.content" :min-height="150"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="currentTab === 1 && true">
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <span v-html="formValidate.content || '无'"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 其他设置-->
        <el-row v-show="currentTab === 2">
          <el-col :span="24">
            <el-col v-bind="grid">
              <el-form-item label="排序：" >
                <el-input-number v-model="formValidate.sort" :min="0" placeholder="请输入排序" :disabled="false" style="width:250px"/>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid">
              <el-form-item label="最高抵扣积分(%)：" >
                <el-input-number
                  v-model="formValidate.maxUseIntegral"
                  :min="0"
                  :max="100"
                  placeholder="请输入最高抵扣积分(%)"
                  :disabled="isDisabled"
                  style="width:250px"
                />%
              </el-form-item>
            </el-col>
            <el-col v-bind="grid">
              <el-form-item label="是否单品预售：">
                <el-switch
                  v-model="formValidate.isCrowdfund"
                  active-text="是"
                  inactive-text="否"
                  :active-value="1"
                  :inactive-value="0"
                  :disabled="isDisabled">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid">
              <el-form-item label="分佣比例(%)：" >
                <el-input-number
                  v-model="formValidate.brokerageRatio"
                  :min="0"
                  :max="100"
                  placeholder="请输入分佣比例"
                  :disabled="isDisabled"
                  style="width:250px"
                />
                %
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品推荐：">
              <el-checkbox-group v-model="checkboxGroup" size="small" @change="onChangeGroup" :disabled="isDisabled">
                <el-checkbox v-for="(item, index) in recommend" :key="index" :value="item.value">{{
                  item.name
                }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button v-show="currentTab > 0" class="submission priamry_border" @click="handleSubmitUp"
            >上一步</el-button
          >
          <el-button v-show="currentTab < 2" type="primary" class="submission" @click="handleSubmitNest('formValidate')"
            >下一步</el-button
          >
          <el-button
            v-show="(currentTab === 2 || $route.params.id) && !isDisabled"
            type="primary"
            class="submission"
            @click="handleSubmit('formValidate')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { productCreateApi, categoryApi, productDetailApi, productUpdateApi } from '@/api/shopping/store';
import { goodDesignList } from '@/api/shopping/systemGroup';
import { fileImageApi} from '@/api/shopping/systemSetting';
import * as selfUtil from '@/utils/ZBKJIutil.js';
const defaultObj = {
  image: '',
  sliderImages: [],
  videoLink: '',
  sliderImage: '',
  storeName: '',
  keyword: '',
  cateIds: [], // 商品分类id
  cateId: null, // 商品分类id传值
  unitName: '件',
  sort: 0,
  giveIntegral: 0,
  maxUseIntegral: 0,
  isCrowdfund: 0,
  brokerageRatio: 0,
  ficti: 0,
  isShow: false,
  isBenefit: false,
  isNew: false,
  isGood: false,
  isHot: false,
  isBest: false,
  tempId: '1',
  attrValue: [
    {
      suk:'',
      image: '',
      price: 10,
      cost: 1,
      stock: 9999,
      sales: 0,
      weight: 1,
      volume: 1,
    },
  ],
  attr: [
    {
      attrName: "规格",
      id: "",
      attrValues: [],
    }],
  selectRule: '',
  isSub: false,
  content: '',
  specType: true,
  id: 0,
  couponIds: [],
  coupons: [],
  activity: ['默认', '秒杀', '砍价', '拼单'],
};
const objTitle = {
  suk: {
    title: '规格名称',
  },
  price: {
    title: '销售价',
  },
  cost: {
    title: '成本价',
  },
  otPrice: {
    title: '原价',
  },
  stock: {
    title: '库存',
  },
  sales: {
    title: '销量',
  },
  // barCode: {
  //   title: '商品编号',
  // },
  weight: {
    title: '重量（KG）',
  },
  volume: {
    title: '体积(m³)',
  },
};
export default {
  name: 'ProductProductAdd',
  components: {
  },
  data() {
    return {
      isDisabled: this.$route.params.isDisabled === '1' ? true : false,
      activity: { 默认: 'red', 秒杀: 'blue', 砍价: 'green', 拼单: 'yellow' },
      props2: {
        children: 'child',
        label: 'name',
        value: 'id',
        multiple: true,
        emitPath: false,
      },
      checkboxGroup: [],
      recommend: [],
      tabs: [],
      fullscreenLoading: false,
      props: { multiple: true },
      active: 0,
      ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
      merCateList: [], // 商品分类筛选
      formThead: Object.assign({}, objTitle),
      formValidate: Object.assign({}, defaultObj),
      formDynamics: {
        ruleName: '',
        ruleValue: [],
      },
      tempData: {
        page: 1,
        limit: 9999,
      },
      grid2: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: '',
      },
      isBtn: false,
      manyFormValidate: [],
      currentTab: 0,
      isChoice: '',
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      ruleValidate: {
        storeName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        cateIds: [{ required: true, message: '请选择商品分类', trigger: 'change', type: 'array', min: '1' }],
        keyword: [{ required: true, message: '请输入商品关键字', trigger: 'blur' }],
        unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        image: [{ required: true, message: '请上传商品封面图', trigger: 'change' }],
        sliderImages: [{ required: true, message: '请上传商品轮播图', type: 'array', trigger: 'change' }],
        specType: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
      },
      tableFrom: {
        page: 1,
        limit: 9999,
        keywords: '',
      },
      tempRoute: {},
      keyNum: 0,
      videoLink: '',
    };
  },
  computed: {
    attrValue() {
      const obj = Object.assign({}, defaultObj.attrValue[0]);
      delete obj.image;
      return obj;
    },
    oneFormBatch() {
      const obj = [Object.assign({}, defaultObj.attrValue[0])];
      delete obj[0].barCode;
      return obj;
    },
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route);
  },
  mounted() {
    this.formValidate.sliderImages = [];
    if (this.$route.params.id) {
      this.getInfo();
    }
    this.getCategorySelect();
    this.getGoodsType();
  },
  methods: {
    addAttrValue() {
      const obj = Object.assign({}, defaultObj.attrValue[0]);
      this.ManyAttrValue.push(obj);
    },
    onChangeGroup() {
      this.checkboxGroup.includes('isGood') ? (this.formValidate.isGood = true) : (this.formValidate.isGood = false);
      this.checkboxGroup.includes('isBenefit')
        ? (this.formValidate.isBenefit = true)
        : (this.formValidate.isBenefit = false);
      this.checkboxGroup.includes('isBest') ? (this.formValidate.isBest = true) : (this.formValidate.isBest = false);
      this.checkboxGroup.includes('isNew') ? (this.formValidate.isNew = true) : (this.formValidate.isNew = false);
      this.checkboxGroup.includes('isHot') ? (this.formValidate.isHot = true) : (this.formValidate.isHot = false);
    },
    // 商品分类；
    getCategorySelect() {
      categoryApi({ status: 1, type: 1 }).then((res) => {
        this.merCateList = this.addDisabled(res.data);
      });
    },
    getParentsById(list, id) {
      for (let i in list) {
        if (list[i].id == id) {//这里的no根据你的需求可进行改变
          //查询到就返回该数组对象的value
          return [list[i].id];
        }
        if (list[i].child) {
          let node = this.getParentsById(list[i].child, id);
          if (node !== undefined) {
            //查询到把父节把父节点加到数组前面
            node.unshift(list[i].id);
            return node;
          }
        }
      }
    },
    isLeafNode(list,id){
      for (let i = 0; i < list.length; i++) {
        const node = list[i];
        if (node.id === id) {
          // 如果找到了id匹配的节点，检查它是否为叶子节点
          return !node.child || node.child.length === 0;
        }
        if (node.child && node.child.length > 0) {
          // 如果当前节点有子节点，则递归查找
          const result = this.isLeafNode(node.child,id);
          if (result) return result;
        }
      }
      // 如果没有找到id匹配的节点，返回undefined
      return false;
    },

    //限制商品分类只能选择开启的
    addDisabled(dropdownList) {
      const list = [];
      try {
        dropdownList.forEach((e, index) => {
          let e_new = {
            id: e.id,
            name: e.name,
            level: e.level,
            pid: e.pid,
            sort: e.sort,
            status: e.status,
          };
          if (!e.status) {
            e_new = { ...e_new, disabled: true };
          }
          if (e.child) {
            const childList = this.addDisabled(e.child);
            e_new = { ...e_new, child: childList };
          }
          list.push(e_new);
        });
      } catch (error) {
        console.log(error);
        return [];
      }
      return list;
    },
    // 删除表格中的属性
    delAttrTable(index) {
      this.ManyAttrValue.splice(index, 1);
    },
    // 详情
    getInfo() {
      const _this = this;
      this.fullscreenLoading = true;
      productDetailApi(this.$route.params.id)
        .then(async (res) => {
          let info = res.data;
          this.formValidate = {
            image: selfUtil.setDomain(info.image),
            sliderImage: info.sliderImage,
            sliderImages: JSON.parse(info.sliderImage),
            storeName: info.storeName,
            keyword: info.keyword,
            cateIds: info.cateId.split(','), // 商品分类id
            cateId: info.cateId, // 商品分类id传值
            unitName: info.unitName,
            sort: info.sort,
            isShow: info.isShow,
            isBenefit: info.isBenefit,
            isNew: info.isNew,
            isGood: info.isGood,
            isHot: info.isHot,
            isBest: info.isBest,
            tempId: info.tempId,
            attr: info.attr,
            attrValue: info.attrValue,
            selectRule: info.selectRule,
            isSub: info.isSub,
            content: info.content ? selfUtil.replaceImgSrcHttps(info.content) :"",
            specType: info.specType,
            id: info.id,
            giveIntegral: info.giveIntegral,
            maxUseIntegral: info.maxUseIntegral,
            isCrowdfund: info.isCrowdfund,
            brokerageRatio: info.brokerageRatio,
            ficti: info.ficti,
            coupons: info.coupons,
            couponIds: info.couponIds,
            checked:info.checked,
            activity: info.activityStr ? info.activityStr.split(',') : ['默认', '秒杀', '砍价', '拼单'],
          };


          //回填分类
          let routeCateIds = [];
          if (this.formValidate.cateIds.length>0) {
            for (var i = 0; i < this.formValidate.cateIds.length;i++) {
              routeCateIds = routeCateIds.concat(this.getParentsById(this.merCateList,Number(this.formValidate.cateIds[i])));
            }
          }
          debugger;
          routeCateIds = Array.from(new Set(routeCateIds));
          this.formValidate.cateIds = routeCateIds;
          let imgs = JSON.parse(info.sliderImage);
          let imgss = [];
          Object.keys(imgs).map((i) => {
            imgss.push(selfUtil.setDomain(imgs[i]));
          });
          this.formValidate.sliderImages = [...imgss];
          if (this.getFileType(this.formValidate.sliderImages[0]) == 'video') {
            //如果返回数据轮播图的第一张是视频，就将其赋值给videoLink做渲染，同时将其在轮播图中删除
            this.formValidate.videoLink = this.formValidate.sliderImages[0];
            this.formValidate.sliderImages.splice(0, 1);
          }
          if (info.isHot) this.checkboxGroup.push('isHot');
          if (info.isGood) this.checkboxGroup.push('isGood');
          if (info.isBenefit) this.checkboxGroup.push('isBenefit');
          if (info.isBest) this.checkboxGroup.push('isBest');
          if (info.isNew) this.checkboxGroup.push('isNew');
          this.formValidate.attr = info.attr;
          this.ManyAttrValue = info.attrValue;
          this.ManyAttrValue.forEach((val) => {
            val.attrValue = JSON.parse(val.attrValue);
          });
          this.fullscreenLoading = false;
        })
        .catch((res) => {
          this.fullscreenLoading = false;
          ElMessage.error(res.message);
        });
    },


    handleImageUpload(param) {
      const formData = new FormData();
      const data = {
        model: 'product',
        pid: '1',
      };
      formData.append('multipart', param.file);

      fileImageApi(formData, data)
        .then((res) => {
          this.formValidate.image = res.data.url;
          this.OneattrValue.image = res.data.url;
          ElMessage.success('上传成功');
        })
        .catch((res) => {
        });
    },
    handleRemoveImage() {
      this.formValidate.image = '';
      this.OneattrValue.image = '';
    },
    handleSliderImagesUpload(param) {
      const formData = new FormData();
      const data = {
        model: 'product',
        pid: '1',
      };
      formData.append('multipart', param.file);

      fileImageApi(formData, data)
        .then((res) => {
          this.formValidate.sliderImages.unshift(res.data.url);

          ElMessage.success('上传成功');
        })
        .catch((res) => {
        });
    },
    handleRemoveSliderImages(i) {
      this.formValidate.sliderImages.splice(i, 1);
    },

    handleVideoUpload(param) {
      const formData = new FormData();
      const data = {
        model: 'product',
        pid: '1',
      };
      formData.append('multipart', param.file);

      fileImageApi(formData, data)
        .then((res) => {
          if (res.data.type !== 'video/mp4') {
            ElMessage.warning('不是mp4请重新选择视频！');
          } else {
            this.formValidate.videoLink = res.data.url;

            ElMessage.success('上传成功');
          }
        }).catch((res) => {
        });
    },
    handleRemoveVideo() {
      this.formValidate.videoLink = '';
    },
    handleSubmitUp() {
      if (this.currentTab-- < 0) this.currentTab = 0;
    },
    handleSubmitNest(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.currentTab++ > 2) this.currentTab = 0;
        } else {
          if(!this.formValidate.storeName) {
            ElMessage.warning('请填写商品名称！');
          }else if (this.formValidate.cateIds.length<1) {
            ElMessage.warning('请选择商品分类！');
          }else if (!this.formValidate.keyword) {
            ElMessage.warning('请填写商品关键字！');
          }else if (!this.formValidate.unitName) {
            ElMessage.warning('请填写商品单位！');
          }else if (!this.formValidate.image) {
            ElMessage.warning('请选择商品封面图！');
          }else if (this.formValidate.sliderImages.length<1) {
            ElMessage.warning('请选择商品轮播图！');
          }
        }
      });
    },
    // 提交
    handleSubmit(name) {
      this.onChangeGroup();
      let newCateIds = this.formValidate.cateIds;
      debugger;
      for (var i = 0; i < newCateIds.length; i++) {
        if (!this.isLeafNode(this.merCateList, Number(newCateIds[i]))) {
          newCateIds.splice(i, 1);
          i--;
        }
      }
      newCateIds = Array.from(new Set(newCateIds));
      this.formValidate.cateId = newCateIds.join(',');
      if (this.formValidate.videoLink) {
        //如果有视频主图，将视频链接插入到轮播图第一的位置
        this.formValidate.sliderImages.unshift(this.formValidate.videoLink);
      }
      this.formValidate.sliderImage = JSON.stringify(this.formValidate.sliderImages);
      this.formValidate.attrValue = this.ManyAttrValue;
      if (this.ManyAttrValue.length<1) {
        ElMessage.warning('请补充商品规格信息');
        return;
      }
      for (var i = 0; i < this.ManyAttrValue.length;i++) {
        if (!this.ManyAttrValue[i].suk || this.ManyAttrValue[i].suk.length<1) {
          ElMessage.warning('请补充商品规格名称');
          return;
        }
      }

      let specs = [];
      this.ManyAttrValue.forEach(function (attrValue) {
        //设置格默认值给市场价
        attrValue.otPrice = 0;
        attrValue.attrValue = JSON.stringify({"规格": attrValue.suk});
        specs.push(attrValue.suk);
      })
      //重新设置规格信息
      this.formValidate.attr[0].attrValues = specs.join(',');
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          this.$route.params.id
            ? productUpdateApi(this.formValidate)
                .then(async (res) => {
                  ElMessage.success('编辑成功');
                  this.fullscreenLoading = false;
                  setTimeout(() => {
                    this.$router.push({ path: '/shopping/store/storeIndex' });
                  }, 500);
                })
                .catch((res) => {
                  this.fullscreenLoading = false;
                })
            : productCreateApi(this.formValidate)
                .then(async (res) => {
                  ElMessage.success('新增成功');
                  this.fullscreenLoading = false;
                  setTimeout(() => {
                    this.$router.push({ path: '/shopping/store/storeIndex' });
                  }, 500);
                })
                .catch((res) => {
                  this.fullscreenLoading = false;
                });
        } else {
          if(!this.formValidate.storeName) {
            ElMessage.warning('请填写商品名称！');
          }else if (!this.formValidate.cateId) {
            ElMessage.warning('请选择商品分类！');
          }else if (!this.formValidate.keyword) {
            ElMessage.warning('请填写商品关键字！');
          }else if (!this.formValidate.unitName) {
            ElMessage.warning('请填写商品单位！');
          }else if (!this.formValidate.image) {
            ElMessage.warning('请选择商品封面图！');
          }else if (!this.formValidate.sliderImage) {
            ElMessage.warning('请选择商品轮播图！');
          }
        }
      });
    },
    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        ElMessage.warning(error);
      }
    },
    // 移动
    handleDragStart(e, item) {
      if (!this.isDisabled) this.dragging = item;
    },
    handleDragEnd(e, item) {
      if (!this.isDisabled) this.dragging = null;
    },
    handleDragOver(e) {
      if (!this.isDisabled) e.dataTransfer.dropEffect = 'move';
    },
    handleDragEnter(e, item) {
      if (!this.isDisabled) {
        e.dataTransfer.effectAllowed = 'move';
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate.sliderImages];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.sliderImages = newItems;
      }
    },
    handleDragEnterFont(e, item) {
      if (!this.isDisabled) {
        e.dataTransfer.effectAllowed = 'move';
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate.activity];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.activity = newItems;
      }
    },
    getGoodsType() {
      /** 让商品推荐列表的name属性与页面设置tab的name匹配**/
      goodDesignList({ gid: 70 }).then((res) => {
        let list = res.data.list;
        let arr = [],
          arr1 = [];
        const listArr = [{ name: '是否热卖', value: 'isGood', type: '5' }];
        let typeLists = [
          { name: '', value: 'isHot', type: '2' }, //热门榜单
          { name: '', value: 'isBenefit', type: '4' }, //促销单品
          { name: '', value: 'isBest', type: '1' }, //精品推荐
          { name: '', value: 'isNew', type: '3' },
        ]; //首发新品
        list.forEach((item) => {
          let obj = {};
          obj.value = JSON.parse(item.value);
          obj.id = item.id;
          obj.gid = item.gid;
          obj.status = item.status;
          arr.push(obj);
        });
        arr.forEach((item1) => {
          let obj1 = {};
          obj1.name = item1.value.fields[1].value;
          obj1.status = item1.status;
          obj1.type = item1.value.fields[3].value;
          arr1.push(obj1);
        });
        typeLists.forEach((item) => {
          arr1.forEach((item1) => {
            if (item.type == item1.type) {
              listArr.push({
                name: item1.name,
                value: item.value,
                type: item.type,
              });
            }
          });
        });
        this.recommend = listArr;
      });
    },
    getFileType(fileName) {
      // 后缀获取
      let suffix = '';
      // 获取类型结果
      let result = '';
      try {
        const flieArr = fileName.split('.');
        suffix = flieArr[flieArr.length - 1];
      } catch (err) {
        suffix = '';
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false;
      }
      suffix = suffix.toLocaleLowerCase();
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
      // 进行图片匹配
      result = imglist.find((item) => item === suffix);
      if (result) {
        return 'image';
      }
      // 匹配 视频
      const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
      result = videolist.find((item) => item === suffix);
      if (result) {
        return 'video';
      }
      // 其他 文件类型
      return 'other';
    },
  },
};
</script>
<style scoped lang="scss">
.upLoadPicBox {
  :deep(.el-alert) {
    padding: 0 !important;
  }
}
.disLabel {
  :deep(el-form-item__label) {
    margin-left: 36px !important;
  }
}
.disLabelmoren {
  :deep(el-form-item__label) {
    margin-left: 120px !important;
  }
}
.priamry_border {
  border: 1px solid #1890ff;
  color: #1890ff;
}
.color-item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #fff;
  margin-right: 10px;
}
.color-list .color-item.blue {
  background-color: #1e9fff;
}
.color-list .color-item.yellow {
  background-color: rgb(254, 185, 0);
}
.color-list .color-item.green {
  background-color: #009688;
}
.color-list .color-item.red {
  background-color: #ed4014;
}
.proCoupon {
  :deep(el-form-item__content) {
    margin-top: 5px;
  }
}
.tabPic {
  width: 40px !important;
  height: 40px !important;
  img {
    width: 100%;
    height: 100%;
  }
}
.noLeft {
  :deep(el-form-item__content) {
    margin-left: 0 !important;
  }
}
.tabNumWidth {
  :deep(el-input-number--medium) {
    width: 121px !important;
  }
  // :deep(el-input-number__increase) {
  //   width: 20px !important;
  //   font-size: 12px !important;
  // }
  // :deep(el-input-number__decrease) {
  //   width: 20px !important;
  //   font-size: 12px !important;
  // }
  // :deep(el-input-number--medium .el-input__inner) {
  //   padding-left: 25px !important;
  //   padding-right: 25px !important;
  // }
  // :deep(thead) {
  //   line-height: normal !important;
  // }
  // :deep(.el-table .cell ){
  //   line-height: normal !important;
  // }
}
.selWidth {
  width: 100%;
}
.selWidthd {
  width: 300px;
}
.button-new-tag {
  height: 28px;
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  img,
  .image {
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
  }
}
.pictrue span {
  position: absolute;
  top: -9px;
  right: -7px;
  color: red;
  font-size: larger;
  font-weight: bold;
}
.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}
.labeltop {
  :deep(el-form-item__label) {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
  }
}
.iview-video-style {
  width: 300px;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin: 0 120px 20px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.iview-video-style span {
  position: absolute;
  top: -9px;
  right: -7px;
  color: red;
  font-size: larger;
  font-weight: bold;
}
</style>
